<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱形图渲染</title>
    <style>
        .bar-container {
            display: flex;
            justify-content: space-around;
            width: 80%;
            margin: 0 auto;
            height: 300px;
            border: 1px solid #ccc;
        }
        .bar {
            width: 20%;
            background-color: #74b9ff;
            color: white;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">四个季度的柱形图</h1>
    <div class="bar-container">
        <div class="bar" id="bar1">Q1: 0%</div>
        <div class="bar" id="bar2">Q2: 0%</div>
        <div class="bar" id="bar3">Q3: 0%</div>
        <div class="bar" id="bar4">Q4: 0%</div>
    </div>
    <script>
        function renderBarChart(q1, q2, q3, q4) {
            const bars = [q1, q2, q3, q4];
            const barElements = document.querySelectorAll('.bar');
            bars.forEach((value, index) => {
                const height = value + '%';
                barElements[index].style.height = height;
                barElements[index].innerText = `Q${index + 1}: ${value}%`;
            });
        }

        // 示例数据：四个季度的值
        const q1Value = 50; // Q1 的值（0-100）
        const q2Value = 75; // Q2 的值（0-100）
        const q3Value = 30; // Q3 的值（0-100）
        const q4Value = 60; // Q4 的值（0-100）

        // 渲染柱形图
        renderBarChart(q1Value, q2Value, q3Value, q4Value);
    </script>
</body>
</html>